<template>
    <div>
        <el-drawer title="通知类型管理" v-model="drawerShow" 
            direction="rtl" :before-close="handleClose" :size="900"
            :close-on-click-modal="false">
            <el-form ref="formRef" label-position="top" require-asterisk-position="right">
                <el-row :gutter="24">
                    <el-col :span="14" v-for="(item, index) in amoutDicValues" :key="index">

                        <el-form-item :label="`字典值${index + 1}`" class="relative">

                            <el-input v-model="item.dictLabel" placeholder="字典值"  clearable></el-input>

                            <div style="width: 100px;height: 30px;position: absolute;right: 0;top: -32px;display: flex;justify-content: flex-end;">
                                <i class="icon-base icon-base-shanchu1" style="font-size: 20px;margin-right: 5px;cursor: pointer;"
                                    @click="removeDivValue(item, index)"></i>
                                <i class="icon-base icon-base-arrow-up-bold" style="font-size: 20px;margin-right: 5px;cursor: pointer;"
                                    v-if="index != 0"
                                    @click="moveItem(item, index, 1)"></i>
                                <i class="icon-base icon-base-arrow-down-bold" style="font-size: 20px;cursor: pointer;"
                                    v-if="index != amoutDicValues.length - 1"
                                    @click="moveItem(item, index, 0)"></i>
                            </div>

                        </el-form-item>

                    </el-col>
                    <el-col :span="24">
                        <el-button type="primary" link>
                            <i class="icon-base icon-base-add-bold" @click="addAmoutDicValue">添加字典值</i>
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">关 闭</el-button>
                    <el-button type="primary" @click="submitForm">保 存</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref } from "vue"
    import { listDataV2, delData } from "@/api/system/dict/data";
    import { editNoticeType, checkNoticeType } from "@/api/notice.js";
    import { ElMessage } from 'element-plus'
    const props = defineProps(['show', 'data', 'state']);
    const emit = defineEmits(['update:show', 'close']);
    const { proxy } = getCurrentInstance();
    const drawerShow = ref(false);
    const amoutDicValues = ref([
        { dictValue: '', },
        { dictValue: '', },
        { dictValue: '', },
    ]);
    watch(() => props.show, () => {
        drawerShow.value = props.show;
        if(drawerShow.value){
            getDicValues();
        }
    }, { deep: true });

    const moveItem = (item, index, state) => {
        if(state){
            const upItem = amoutDicValues.value[index - 1];
            amoutDicValues.value[index - 1] = item;
            amoutDicValues.value[index] = upItem;
            return
        }
        const downItem = amoutDicValues.value[index + 1];
        amoutDicValues.value[index + 1] = item;
        amoutDicValues.value[index] = downItem;
    };
    const addAmoutDicValue = () => {
        const values = amoutDicValues.value.map( item => item.dictValue );
        let max = values[0];
        values.map( item => max = max < item ? item : max );
        amoutDicValues.value.push({ dictValue: Number(max) + 1 , dictLabel: '' })
    };
    const removeDivValue = (item, index) => {
        if(amoutDicValues.value.length <= 1){
            ElMessage({ type: 'warning', message: '至少保留一项字典值', })
            return
        }
        if(item.dictCode){
            checkNoticeType({ 
                dictCode: item.dictCode
            }).then((res) => {
                const isDel = res.data;
                if(isDel){
                    proxy.$modal.confirm('确定删除此字典值吗？').then(function () {
                        return delData(item.dictCode);
                    }).then(() => {
                        getDicValues();
                        proxy.$modal.msgSuccess("删除成功");
                    }).catch(() => { });
                }else{
                    proxy.$modal.msgError("该通知类型已被使用，暂时无法删除");
                }
            })
            return
        }
        amoutDicValues.value.splice(index, 1)
    };
    const submitForm = () => {
        const saveDivValues = [];
        amoutDicValues.value.map( (item, index) => {
            if(item.dictValue){
                item.dictCode = item.dictCode || '';
                item.dictValue = item.dictValue;
                item.dictLabel = item.dictLabel;
                item.dictSort = index + 1;
                item.dictType = 'notification_type';
                saveDivValues.push(item);
            }
        });
        editNoticeType({ 
            dictDataList: saveDivValues
         }).then((res) => {
            ElMessage({ type: 'success', message: '保存成功', })
            handleClose();
        })
    };
    const handleClose = () => {
        drawerShow.value = false;
        emit('update:show', false);
        emit('close')
        amoutDicValues.value = [
            { dictValue: '', },
            { dictValue: '', },
            { dictValue: '', },
        ]
    };
    const getDicValues = () => {
        amoutDicValues.value = [
            { dictValue: '', },
            { dictValue: '', },
            { dictValue: '', },
        ]
        listDataV2({ dictType: 'notification_type' }).then((res) => {
            const dicValues = res.data || [];
            const valueCount = dicValues.length;
            if(valueCount <= 3){
                dicValues.map( (item, index) => {
                    amoutDicValues.value[index].dictValue = item.dictValue;
                    amoutDicValues.value[index].dictLabel = item.dictLabel;
                    amoutDicValues.value[index].dictCode = item.dictCode;
                });
            }else{
                for(let i = 4; i <= valueCount; i++){
                    amoutDicValues.value.push({ dictValue: '', });
                }
                dicValues.map( (item, index) => {
                    amoutDicValues.value[index].dictValue = item.dictValue;
                    amoutDicValues.value[index].dictLabel = item.dictLabel;
                    amoutDicValues.value[index].dictCode = item.dictCode;
                });
            }
        });
    };
</script>
<style scoped>
    :deep(.el-drawer__body){
        padding-top: 0;
        border-bottom: 1px solid #eee;
    }
    :deep(.el-step__title){
        font-size: 14px;
    }
    .step_container{
        background-color: #F2F2F2;
        padding: 10px 5px 5px;
        border-radius: 5px;
    }
    .form_container{
        padding: 10px 0;
        box-sizing: border-box;
    }
</style>